<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: auto;
        font-family: "宋体";
      }
      th {
        background-color: rgb(195, 221, 224);
      }
      th,
      td {
        border: 1px solid rgb(212, 212, 212);
        padding: 10px;
      }
      tr:nth-child(2n-1) {
        background-color: rgb(212, 227, 229);
      }
      tr:nth-child(2n) {
        background-color: rgb(195, 221, 224);
      }
      button {
        background-color: rgb(76, 173, 236);
        border: 0px;
        border-radius: 10px;
        width: 50px;
        height: 25px;
      }
      button:hover {
        background-color: rgb(38, 156, 233);
      }
      button:active {
        background-color: rgb(138, 156, 233);
      }
      td[contenteditable="true"] {
        outline: none;
      }
      td[contenteditable="true"]:focus {
        border: 2px solid rgb(62, 85, 7);
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>学号</th>
          <th>班级</th>
          <th>专业</th>
          <th>选项</th>
        </tr>
      </thead>
      <tbody>
        <tr id="addtr">
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td contenteditable="true"></td>
          <td><button id="add">添加</button></td>
        </tr>
      </tbody>
    </table>
    <script>
      class Table {
        constructor() {
          fetch("/dynamic/db?option=query").then((response) => {
            response.text().then((data) => {
              this.init_dom(JSON.parse(data));
            });
          });
          document.querySelector("#add").addEventListener("click", (event) => {
            let tds =
              event.target.parentElement.parentElement.querySelectorAll("td");
            let student = {
              name: tds[0].textContent,
              studentId: tds[1].textContent,
              clasz: tds[2].textContent,
              major: tds[3].textContent,
            };
            tds[0].textContent = "";
            tds[1].textContent = "";
            tds[2].textContent = "";
            tds[3].textContent = "";
            fetch(
              `/dynamic/db?option=add&name=${student.name}&studentId=${student.studentId}&major=${student.major}&clasz=${student.clasz}`
            ).then((response) => {
              response.text().then((data) => {
                console.log(data);
                student.id = data;
                this.create_tr(student);
              });
            });

          });
        }
        init_dom(data) {
          data.forEach((student) => {
            this.create_tr(student);
          });
        }
        create_tr(student) {
          let tr = document.createElement("tr");
          let name = document.createElement("td");
          name.textContent = student.name;
          let studentId = document.createElement("td");
          studentId.textContent = student.studentId;
          let clasz = document.createElement("td");
          clasz.textContent = student.clasz;
          let major = document.createElement("td");
          major.textContent = student.major;
          let remove = document.createElement("td");
          let button = document.createElement("button");
          button.textContent = "删除";
          button.id = student.id;
          button.addEventListener("click", this.removeHandler);
          remove.appendChild(button);
          tr.appendChild(name);
          tr.appendChild(studentId);
          tr.appendChild(clasz);
          tr.appendChild(major);
          tr.appendChild(remove);
          document
            .querySelector("tbody")
            .insertBefore(tr, document.querySelector("#addtr"));
        }
        removeHandler(event) {
          let id = event.target.id;
          fetch("/dynamic/db?option=remove&id=" + id).then((response) => {
            response.text().then((data) => {});
          });
          document
            .querySelector("tbody")
            .removeChild(event.target.parentElement.parentElement);
        }
      }

      new Table();
    </script>
  </body>
</html>
